<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

</head>

<body>
    <div id="app"></div>


    <script type="text/babel">
        /* 
           情况1: 满足条件渲染界面A, 否则渲染界面B
           情况2: 只有满足条件才渲染界面, 否则没有任何显示
           */

        let vDom
        let isLoading = false

        /* if ... */

        // if (isLoading) {
        //     vDom = <h2>数据加载完成</h2>
        // } else {
        //     vDom = <h3>正在加载中</h3>
        // }


        /* 三元运算符*/
        // vDom = isLoading?<h2>数据加载完成2</h2>: <h3>正在加载中2</h3>

        // 一般不用这个
        // if(isLoading) {
        //     vDom = <h2>数据加载完成3</h2>
        // }


        /* && */
        // vDom = isLoading && <h2>数据加载完成4</h2>

        /* 
     表达1 && 表达式2
       如果表达式1对应的布尔值是true, 结果为表达式2的值
       如果表达1对应的布尔值是false, 结果为表达式1的值
     表达1 || 表达式2
        如果表达式1对应的布尔值是true, 结果为表达式1的值
        如果表达1对应的布尔值是false, 结果为表达式2的值
    */
        //  渲染虚拟DOM
        ReactDOM.render(vDom, document.getElementById('app'))
    </script>
</body>

</html>